<template>
	<view style="width:100%;">
		<!-- , flagTemp==0?'mt1':flagTemp==1?'mt2':'' -->
		<view  :class="['add-img-box']">
			<view class="add-img-item" v-for="(item, index) in imgListTemp" :key="index">
				<image class="add-img" @click="imgInfo(index)" :src="fileUrl+item.filepath" mode="aspectFill">
				</image>
				<image v-if="!disabled" class="add-img-del" @click="delImg(index)" src="@/static/img/icon/icon_del.png">
				</image>
			</view>
			<view v-if="imgListTemp.length < imgCountTemp&& !disabled " class="add-img-item" @click="openCamera()">
				<image class="add-img" src="@/static/img/attachment/icon_add.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Platform,
	} from '@/static/config.js';
	export default {
		name: "attachment",
		props: {
			type: { 
				type: String,
				default: ""
			},
			disabled: { // 是否只读
				type: Boolean,
				default: false
			},
			imgList: {
				type: Array,
				default () {
					return []
				}
			},
			imgCount: { // 图片张数，默认3张，大于3张修改数值
				type: Number,
				default: 1
			},
			iscamera: { // 是否仅要求实时拍照
				type: Boolean,
				default: true
			},
			
		},
		data() {
			return {
				// 避免直接修改props
				imgListTemp: this.imgList,
				imgCountTemp: this.imgCount,
				fileUrl:Platform.api_requestUrl+'/stp-common-file/download/'
			};
		},
		methods: {
			openCamera() {
				let _self = this;
				// 最多可以选择的图片张数
				let count = 1;
				count = this.imgCountTemp;
				// **************** 从本地相册选择图片或使用相机拍照 ****************
				uni.chooseImage({
					sourceType: this.iscamera ? ['camera'] : ['album','camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					count: count, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //['original', 'compressed'] 可以指定是原图还是压缩图，默认二者都有
					success: e => { //成功则返回图片的本地文件路径列表 tempFilePaths
						// tempFilePaths 图片的本地文件路径列表；tempFiles 图片的本地文件列表，每一项是一个 File 对象（path、size、name）
						// 控制剩余可选数
						_self.imgListTemp = [..._self.imgListTemp, ...e.tempFiles];

						let tt = _self.commitImages();

					}
				});
			},
			imgInfo(i) {
				let _self = this;
				let tempList = [];
				_self.imgListTemp.forEach(img => {
					tempList.push(this.fileUrl+img.filepath);
				});

				// **************** 预览图片 ****************
				uni.previewImage({
					current: i, //为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张
					loop: false, //是否可循环预览，默认值为 false
					urls: tempList, //需要预览的图片链接列表
					indicator: 'default' //图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
					// longPressActions:长按图片显示操作菜单，如不填默认为保存相册
					// success
					// fail
					// complete
				});
			},
			delImg(i) {
				let _self = this;
				uni.showModal({
					content: '确定删除这张吗',
					success: res => {
						if (res.confirm) {
							_self.imgListTemp.splice(i, 1);
							// _self.imgCountTemp++;
							
							// 删除父级数据
							uni.$emit('file-del', {
								key: true,
								msg: '删除成功！',
								data: _self.imgListTemp,
								type:_self.type
							})
						} else if (res.cancel) {}
					}
				});
			},
			// 图片上传
			async commitImages() {
				
				return await this.passWay1();
						

			},
			passWay1() {
				uni.showLoading({
					title: '识别中'
				});
				let _self = this;
				let attachfileids = []; //附件上传后的id数组；
				return new Promise((resolve, reject) => {
					// App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
					let listNew = _self.imgListTemp.filter(e => !!e.size) // 新照片文件 --> 上传
					let listOld = _self.imgListTemp.filter(e => !e
						.size) // 旧照片文件 --> 用ID（旧照片已经上传，无需再传，只需保存文件ID）
					if (listNew.length > 0) {
						for (let i = 0; i < listNew.length; i++) {
							uni.uploadFile({
							    url: Platform.api_requestUrl + '/stp-common-file/upload',
								filePath: listNew[i].path,
								name: 'file', //与服务器端匹配
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data);
									uni.hideLoading();
									if (data.code == 200) {
										attachfileids.push(data.data.id); // 返回服务器图片
										// 图片全部上传后
										if (attachfileids.length == listNew.length) {
											// 整合新照片和旧照片的ID
											let ids = [...(listOld.map(e => e.id)), ...
												attachfileids
											];
											uni.$emit('file-refresh', {
												key: true,
												msg:ids,
												type:this.type
											})
											
											resolve(ids);
											
										}
									} else {
										uni.showModal({
											content: '上传失败',
											showCancel: false
										})
									}
								},
								fail(e) {
									reject(e)
								}
							});
						}
						uni.hideLoading();
					} else {
						// 没有新照片时，需赋值最新的旧照片数据（可能进行了删除操作）
						let ids = [...(listOld.map(e => e.id))] //附件编号		
						resolve(ids)
						uni.hideLoading();
					}
				})
			},
			passWay2(linkid, flag) {
				uni.showLoading({
					title: '上传中'
				});
				let _self = this;
				let attachfileids = []; //附件上传后的id数组；
				return new Promise((resolve, reject) => {
					// App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
					let listNew = _self.imgListTemp.filter(e => !!e.size) // 新照片文件 --> 上传
					let listOld = _self.imgListTemp.filter(e => !e
						.size) // 旧照片文件 --> 用ID（旧照片已经上传，无需再传，只需保存文件ID）
					if (listNew.length > 0) {
						for (let i = 0; i < listNew.length; i++) {
							uni.uploadFile({
								url: Platform.api_requestUrl + '/attachment/upload',
								filePath: listNew[i].path,
								name: 'file', //与服务器端匹配
								formData: {
									'linkid': linkid, // 上传附带参数
									'type': flag, // 上传附带参数
								},
								success: (uploadFileRes) => {
									let data = JSON.parse(uploadFileRes.data);
									uni.hideLoading();
									if (data.code == 200) {
										attachfileids.push(data.data.id); // 返回服务器图片
										// 图片全部上传后
										if (attachfileids.length == listNew.length) {
											// 整合新照片和旧照片的ID
											let ids = [...(listOld.map(e => e.id)), ...
												attachfileids
											];
										
											uni.$emit('file'+flag+'-refresh'+_self.type, {
												key: true,
												msg: attachfileids
											})
											resolve(attachfileids);
										}
									} else {
										uni.showModal({
											content: '上传失败',
											showCancel: false
										})
									}
								},
								fail(e) {
									reject(e)
								}
							});
						}
						uni.hideLoading();
					} else {
						// 没有新照片时，需赋值最新的旧照片数据（可能进行了删除操作）
						let ids = [...(listOld.map(e => e.id))] //附件编号		
						resolve(ids)
						uni.hideLoading();
					}
				})
			}
		},
		watch: {
			disabled: {
				handler(item, index) { //监听到数据变化执行方法 
					this.disabled = item
				},
				deep: true // 深度监听父组件传过来对象变化 
			},
			imgList: {
				handler(item, index) {
					this.imgListTemp = item
				},
				deep: true
			},
			imgCount: {
				handler(item, index) {
					this.imgCountTemp = item
				},
				deep: true
			},
			iscamera: {
				handler(item, index) { //监听到数据变化执行方法 
					this.iscamera = item
				},
				deep: true // 深度监听父组件传过来对象变化 
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	/* 图片 */
	.add-box {
		// padding: 15rpx 0;
		flex-wrap: wrap;
	}

	.add-img-box {
		display: flex;
		width: 20%;
		// padding: 0 40rpx;
		// padding-left: 10rpx;
		flex-direction: row;
		flex-wrap: nowrap;
		float: left;
	}

	.add-img-item {
		/* width:210rpx;
		height:210rpx; */
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
		position: relative;
		/* padding: 9rpx 0; */
		 margin: 2px 10px;
	}

	.add-img-camera {
		flex: 1;
	}

	.add-img {
		width: 80px;
		height: 80px;
		border-radius: 16rpx;
	}

	.add-img-del {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		right: -15px;
		top: -3px;
		border-radius: 20rpx;
	}
	.mt1{
		margin-top: 28px;
	}
	.mt2{
		margin-top: 55px;
	}
</style>
